<template>
	<div class="back">
		<div class="loginForm">
			<div style="padding-top:50px;"><span>用户名：</span><input type="text" v-model="name"/></div>
			<div><span>密码：</span><input type="password" v-model="password"/></div>
			<div class="loginBtn" @click="login">登录</div>
			<div @click="toRegister" >注册</div>
		</div>
	</div>
	
</template>

<script setup>
	import {ref,onMounted} from "vue"
	import http from "../../request.js"
	import {useRouter} from "vue-router"
	const name =ref("")
	const password =ref("")
	const router = useRouter()
	onMounted(()=>{
		window.localStorage.removeItem("token")
	})
	function login(){
		http.post("/user/login",{name:name.value,password:password.value}).then(res=>{
			window.localStorage.setItem("token",res.data.data.token)
			window.localStorage.setItem("loginUser",res.data.data.loginUser)
			setTimeout(()=>{
				router.push("/book")
			},100)
		})
	}
	function toRegister(){
		router.push("/register")
	}
</script>

<style>
	.back{
		width:100%;
		height:100vh;
		background:url(/public/img/loginBack.png);
		background-size:100% 100%;
		background-repeat: no-repeat;
	}
	.loginForm{
		width:550px;
		height:340px;
		position: absolute;
		/* padding-left:150px; */
		box-sizing: border-box;
		background:transparent;
		/* background:#fff; */
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		color:#fff;
	}
	.loginForm>div{
		display: flex !important;
		justify-content: center !important;
		margin:40px 0;
	}
	.loginForm>div>span{
		display:block;
		width:100px;
		text-align:center;
	}
	.loginForm>div>input{
		/* height:30px; */
	}
	.loginBtn{
		width:200px;
		height:50px;
		line-height:50px;
		margin-left: 200px !important;
		/* text-align:center; */
		border-radius: 20px;
		color:#fff;
		background:skyblue;
		/* box-sizing: border-box; */
	}
</style>